<template>
    <el-row type="flex" justify="center">
      <el-col :span="4">
        <div>
          <span>配送至:</span>
          <span>中国大陆</span>
        </div>
      </el-col>
      <el-col :span="16"><div>
        <span>{{tip | ellipsis}}</span>
      </div></el-col>
      <el-col :span="2"><div>
        <span>
          <router-link to="/CustomerService" target='_blank'>在线客服</router-link>
        </span>
      </div>
      </el-col>
      <el-col :span="2">
        <div>
        <a href="#" @click.prevent="dialog">联系我们</a>
      </div>
      </el-col>
    </el-row>
</template>

<script>
    export default {
        name: "TopTips",
        data(){
          return{
            timer:'',
            tip:'尊敬的顾客,由于疫情防控,全国部分地区物流服务或将受影响,给您带来的不便,我们深感抱歉。如需要任何帮助,欢迎联系拉菲格慕客服顾问。请勿向不明来源订单付款,谨防诈骗。',
            dialogVisible: true,
          }
        },
        methods:{
          getRollTip(){
            //第一个字的
            this.tip = this.tip.split('').reverse().join('')
          },
          dialog(){
            this.$emit("dialog")
          },
        },
        computed:{

        },
        filters:{
          ellipsis(data){
            if (data.length > 50){
              return data.substring(0,50)
            }
          }
        },
        mounted() {
          // this.timer = setInterval(this.getRollTip,500)
        },
        beforeDestroy() {
        clearInterval(this.timer);
        }
    }
</script>

<style scoped>
  .el-row{
    background-color: #e5e5e5cc;
  }
  .root{
    height: 100%;
  }
  .el-dialog{
    position: absolute;
  }
div {
  height: 38px;
  line-height: 38px;
  font-size: 12px;

  text-align: center;
}
</style>
